<template>
  <el-timeline
    :reverse="reverse"
    v-loading="infoLoading"
    :style="timelineHeight"
  >
    <el-timeline-item
      v-for="(activity, index) in activities"
      :key="index"
      size="large"
      type="primary"
      icon="el-icon-more"
      :timestamp="activity.updatedAt"
    >
      {{ activity.user.trueName }} {{ activity.content }}
    </el-timeline-item>
  </el-timeline>
</template>

<script>
import { getLog } from '@/api/customer/index'

export default {
  name: 'log',
  props: {
    id: '',
  },
  data() {
    return {
      reverse: false,
      activities: [],
      infoLoading: true,
      timelineHeight: { height: 'calc(100vh - 275px)' },
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.timelineHeight = { height: 'calc(100vh - 275px)' }
      this.infoLoading = true
      let customerId = 0
      if (typeof this.id == 'object') {
        customerId = this.id[0]
      } else {
        customerId = this.id
      }
      await getLog(customerId).then((res) => {
        this.activities = res.data

        setTimeout(() => {
          this.infoLoading = false
        }, 0.5 * 1000)
        setTimeout(() => {
          this.timelineHeight = {}
        }, 1000)
      })
    },
  },
  watch: {
    id() {
      this.activities = []
      this.fetchData()
    },
  },
}
</script>

<style scoped></style>
